<template>
  <!-- 2.创建挂载点 -->
  <div id="map" style="height: 100vh; width: 100vw"></div>
</template>

<script setup>
import { app } from '../main'
import { baseLayer, imgLayer } from '../map_libs/gaode.js'

// 保证了地图初始化时，页面上已经有了DOM(id="map" 的 div)
onMounted(() => {
  // 5.创建地图实例
  const map = new ol.Map({
    target: 'map',
    layers: [baseLayer],
    view: new ol.View({
      center: [113.72510701417924, 33.62662677351111],
      zoom: 4,
      projection: 'EPSG:4326',
    }),
  })
  // 依赖注入app
  app.provide('$map', map)
})
</script>

<style></style>
